<template>
    <div class="boxList">
      <!-- 库位列表结构 -->
      <div class="List" v-if="isShow">
        <!-- 图片区域 -->
        <div class="myimg" v-if="myimage != ''">
          <van-image
            id="myone"
            :src="'data:image/png;base64,' + myimage"
            :style="{
              width: width * 0.6* num  + 'px',
              height: height * 0.6* num  + 'px',
              marginLeft: loctionleft + 'px',
              marginTop: loctiontop + 'px',
            }"
          >
            <!-- 车辆的实时位置 -->
            <div class="mybycar">
              <span
                class="Gray"
                :style="{
                  width: 15 * num + 'px',
                  height: 15 * num + 'px',
                  top: ((inif.y / 10.0 - newy * 100.0) / 5  - 16) * 0.6 * num + 'px',
                  left: ((inif.x / 10.0 - newx * 100) / 5 - 4) * 0.6 * num + 'px',
                  transform: 'rotate(' + inif.fused_angle - 20 + 'deg)',
                }"
              >
              </span>
              <img
                id="bycar"
                src="../../../assets/车辆.png"
                alt=""
                :style="{
                  width: 15 * num + 'px',
                  height: 30 * num + 'px',
                  top: ((inif.y / 10.0 - newy * 100.0) / 5 ) * 0.6 * num + 'px',
                  left: ((inif.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                  transform: 'rotate(' + inif.fused_angle + 'deg)',
                }"
              />
            </div>
  
            <!-- -----------------------当没有点击任何一项时显示全部点位数据 ((list.y - 168) * num) / 10  ------------------------- -->
            <template v-for="(item, index) in robot">
              <!--充电点图片 -->
              <img
                v-if="item.type == 3"
                :key="index * 0.15"
                id="bycar"
                src="../../../assets/充电车.png"
                alt=""
                :style="{
                  width: 15 * num + 'px',
                  height: 30 * num + 'px',
                  top: ((item.y / 10.0 - newy * 100.0) / 5) * 0.6 * num + 'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                  transform: 'rotate(' + item.fused_angle + 'deg)',
                }"
              />
              <!-- 显示全部库位点区域 -->
              <span
                v-if="item.type != 3"
                @click="select(item)"
                :key="item.id"
                id="span"
                :class="[
                  { active: activeItem === list },
                ]"
                :style="{
                  width: 25 * num + 'px',
                  height: 25 * num + 'px',
                  lineHeight: 40 * 0.6 * num + 'px',
                  fontSize: 40 * 0.6 * num + 'px',
                  top: ((item.y / 10.0 - newy * 100.0) / 5) * 0.6 * num + 'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                }"
                >{{ item.id }}</span
              >
            </template>
  
            <!-- -------------------------------------------------------------显示路线编辑点位 -->
            <template v-if="list == ''">
              <span
                v-for="item in complete"
                :key="item.weizhi.y"
                id="mianspan"
                :style="{
                  width: 35 * 0.5 * num + 'px',
                  height: 35 * 0.5 * num + 'px',
                  lineHeight: 40 * 0.5 * num + 'px',
                  fontSize: 40 * 0.5 * num + 'px',
                  top: ((item.start_point.y / 10.0 - newy * 100.0) / 5 ) * 0.6 * num + 'px',
                  left:((item.start_point.x / 10.0 - newx * 100) / 5) * 0.6 * num +'px',
                }"
                >1</span
              >
            </template>
  
            <!-- ----------------------------------------------------------------终点圆点 -->
            <template v-if="list == ''">
              <span
                v-for="item in complete"
                :key="item.weizhi.age"
                id="mianspan"
                :style="{
                  width: 35 * 0.5 * num + 'px',
                  height: 35 * 0.5 * num + 'px',
                  lineHeight: 40 * 0.5 * num + 'px',
                  fontSize: 40 * 0.5 * num + 'px',
                  top: ((item.target_point.y / 10.0 - newy * 100.0) / 5 ) * 0.6 * num + 'px',
                  left: ((item.target_point.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                }"
                >2</span
              >
            </template>
  
            <!-- ------------------------------------------------------------小圆点之间的边框 -->
            <template v-if="list == ''">
              <span
                v-for="item in complete"
                :key="item.id * 0.01"
                id="myspan"
                style="transform-origin: 10px 10px"
                :style="{
                  width: (item.weizhi.width + 130) * 0.6 * num + 'px',
                  height: (item.weizhi.height - 6) * 0.6 * num + 'px',
                  top: item.weizhi.y * num + 'px',
                  left: item.weizhi.x * num + 'px',
                  transform: 'rotate(' + item.weizhi.age + 'deg)',
                }"
              ></span>
            </template>
  
            <!-- -------------------------库位点标记小圆点       正确的转换------------------------------- -->
            <template v-if="list != ''">
              <span
                v-if="list.type != 3"
                id="span"
                class="active"
                :style="{
                  width: 25 * num + 'px',
                  height: 25 * num + 'px',
                  top: ((list.y / 10.0 - newy * 100.0) / 5 ) * 0.6 * num + 'px',
                  left: ((list.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                }"
                >{{ list.id }}</span
              >
  
              <!--充电点图片 -->
              <div
                v-if="list.type == 3"
                class="imgactive"
                :style="{
                  width: 20 * num + 'px',
                  height: 30 * num + 'px',
                  top: ((list.y / 10.0 - newy * 100.0) / 5) * 0.6 * num + 'px',
                  left: ((list.x / 10.0 - newx * 100) / 5 - 8) * 0.6 * num + 'px',
                  transform: 'rotate(' + list.fused_angle + 'deg)',
                }"
              >
                <img
                  v-if="list.type == 3"
                  id="bycar"
                  src="../../../assets/充电车.png"
                  alt=""
                  :style="{
                    width: 15 * num + 'px',
                    height: 30 * num + 'px',
                    top: ((list.y / 10.0 - newy * 100.0) / 5) * 0.6 * num + 'px',
                    left: ((list.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                    transform: 'rotate(' + list.fused_angle + 'deg)',
                  }"
                />
              </div>
            </template>
  
            <!-- </template> -->
            <!-- 显示路线编辑点位 -->
          </van-image>
          <!--平移按钮 -->
          <van-button @click="right" class="right"
            ><van-icon name="arrow" size="44"
          /></van-button>
          <van-button @click="left" class="left"
            ><van-icon name="arrow-left" size="44"
          /></van-button>
          <van-button @click="top" class="top"
            ><van-icon name="arrow-up" size="44"
          /></van-button>
          <van-button @click="bottom" class="bottom"
            ><van-icon name="arrow-down" size="44"
          /></van-button>
  
          <!-- --------------------------------------------------------------按钮放大缩小区域 -->
          <div class="mybig">
            <van-button type="info" @click="big"
              ><i class="iconfont icon-sousuofangda" style="fontsize: 28px"></i
            ></van-button>
            <van-button type="info" @click="min"
              ><i class="iconfont icon-suoxiao" style="fontsize: 28px"></i
            ></van-button>
          </div>
          <!-- --------------------------------------------------------------按钮放大缩小区域 -->
        </div>
  
        <!-- -------------------------------------------------库位属性内容---------------------------------------------- -->
        <div class="property" v-if="newproperty">
          <!-- 删除库位按钮 -->
          <div class="mybutton">
            <!-- <van-button id="youbutton" @click.stop="record">记录库位</van-button>
            <van-button @click="remove(list.id)">删除库位</van-button> -->
            <!-- <van-button @click="amend(list)">编辑库位</van-button> -->
          </div>
          <div class="zore">库位信息</div>
          <div class="beiji">
            <div class="middle" v-if="list != ''">
              <div class="one">
                <span>库位ID:</span
                ><span v-if="list != 0" style="color: #fff; marginLeft: 40px">
                  {{ list.id }}</span
                >
              </div>
              <div class="three"><span>库位坐标:</span></div>
            </div>
            <div class="four" v-if="list != ''">
              <div class="x">
                <!--x轴区域  @focus="addX" -->
                <!-- <van-field
                  label-width="80"
                  
                  v-model="list.x"
                  label="x轴:"
                  placeholder="请输入x轴坐标"
                  :rules="rules.x"
                  :value="inif.x"
                /> -->
                <span>X轴:</span>
                <keyboardss :inputValue="list.x" @keyList="ListX"></keyboardss>
              </div>
              <div class="y">
                <!-- y轴区域 @focus="addY" -->
                <!-- <van-field
                  label-width="80"
                  
                  v-model="list.y"
                  label="y轴:"
                  placeholder="请输入y轴坐标"
                  :rules="rules.y"
                  :value="inif.y"
                /> -->
                <span>Y轴:</span>
                <keyboardss :inputValue="list.y" @keyList="ListY"></keyboardss>
              </div>
              <div class="mission">
                <!-- <h5>任务点位选择</h5> -->
                <van-radio-group v-model="newradio" direction="horizontal">
                  <van-radio
                    :name="index"
                    v-for="(item, index) in Multiple"
                    :key="index"
                    @click="addMultiple(index)"
                    >{{ item }}</van-radio
                  >
                </van-radio-group>
              </div>
              <div style="margin: 16px" class="newbutton">
                <van-button round block type="info" @click="onSubmit"
                  >保存</van-button
                >
                <van-button round block type="info" @click="onClickLeft"
                  >取消</van-button
                >
              </div>
            </div>
          </div>
        </div>
  
        <!--点击图片上的库位点 -->
        <div class="property" v-if="!newproperty">
          <!-- 删除库位按钮 -->
          <div class="mybutton"></div>
          <div class="zore">库位信息</div>
          <div class="beiji">
            <div class="middle" v-if="activeItem != ''">
              <div class="one">
                <span>库位ID:</span
                ><span
                  v-if="activeItem != 0"
                  style="color: #fff; marginleft: 30px"
                >
                  {{ activeItem.id }}</span
                >
              </div>
              <div class="three"><span>库位坐标:</span></div>
            </div>
            <div class="four" v-if="activeItem != ''">
              <div class="x">
                <!--x轴区域  @focus="addX" -->
                <!-- <van-field
                  label-width="80"
                  
                  v-model="list.x"
                  label="x轴:"
                  placeholder="请输入x轴坐标"
                  :rules="rules.x"
                  :value="inif.x"
                /> -->
                <span>X轴:</span>
                <keyboardss
                  :inputValue="activeItem.x"
                  @keyList="ListX"
                ></keyboardss>
              </div>
              <div class="y">
                <!-- y轴区域 @focus="addY" -->
                <!-- <van-field
                  label-width="80"
                  
                  v-model="list.y"
                  label="y轴:"
                  placeholder="请输入y轴坐标"
                  :rules="rules.y"
                  :value="inif.y"
                /> -->
                <span>Y轴:</span>
                <keyboardss
                  :inputValue="activeItem.y"
                  @keyList="ListY"
                ></keyboardss>
              </div>
              <div class="mission">
                <!-- <h5>任务点位选择</h5> -->
                <van-radio-group v-model="newradio" direction="horizontal">
                  <van-radio
                    :name="index"
                    v-for="(item, index) in Multiple"
                    :key="index"
                    @click="addMultiple(index)"
                    >{{ item }}</van-radio
                  >
                </van-radio-group>
              </div>
              <div style="margin: 16px" class="newbutton">
                <van-button round block type="info" @click="onSubmit"
                  >保存</van-button
                >
                <van-button round block type="info" @click="onClickLeft"
                  >取消</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Dialog } from "vant";
  //导入封装好的路线编辑数据接口
  import { geteditorsApi } from "@/api/editors";
  //导入封装好的数据接口
  import { recordApi, removeApi, updataApi, gainApi } from "@/api/record";
  //导入封装好的列列表数据接口
  import { addparseApi, deteleparseApi, changedApi } from "@/api/location";
  // 导入yaml格式进行获取到数据的转换
  import yaml from "js-yaml";
  export default {
    // 接收父组件传过来的值
    props: ["isShow", "list", "robot", "parse", "xshow", "yshow", "radio"],
    //声明保存数据的data
    data() {
      return {
        newproperty: true,
        newradio: null, //定义一个数据用来保存父组件中的值
        loctiontop: 0, //右边偏移变量
        loctionleft: 0, //左边便宜变量
        activeItem: "", //选中之后高亮的类名
        // threeactive:false, //点击库位点高亮
        rowshow: false, //控制列列表键盘显示隐藏
        // xshow: false, //x轴键盘显示和隐藏
        // yshow: false, //y轴键盘显示和隐藏
        complete: [], //保存路线编辑数据
        keymnId: false,
        num: 0.5,
        keysshow: false,
        keyshow: false, //控制键盘的显示和隐藏
        Listitem: "", //用来保存点击列列表单的那一项数据
        listID: false, //控制表单的禁用与显示
        isID: false, //用来控制表单的禁用和不禁用
        id: "", //点击修改的id用做三元判断
        forbid: "禁止叉臂起降", //禁止叉臂起降
        shutoff: "关闭后避障", //关闭后避障
        closed: "关闭前避障", //关闭前避障
        queen: 0, //关闭后避障
        front: 0, //关闭前避障
        take: 0, //禁止叉臂起降
        newindex: "", //用来保存单选的下标
        Multiple: ["一般任务点", "启动视觉", "待命点"], //单选的数组
        formKey: 0, //用来清空表单验证
        result: [], //列列表多选的数组
        myimage: "", //定义一个保存base64格式的图片变量
        formShow: false, //控制表单的显示与隐藏
        columnShow: false, //列列表的显示与隐藏
        location: [], //列列表包含的库位列表数组
        newItem: "", //保存点击的那一项数据
        width: "",
        height: "",
        newx: "",
        newy: "",
        //列列表信息
        inif: {
          columnId: null, //id
          seatId: "", //库位id
          speed: "", //最大速度
          x: "", //获取x轴坐标
          y: "", //获取y轴坐标
          fused_angle: "", //车辆角度
        },
        // 进行输入的正则验证
        rules: {
          columnId: [
            { required: true },
            { pattern: /^[1-9]\d*/, message: "请输入正确的id" },
          ],
          seatId: [
            { required: true },
            { pattern: /^[1-9]\d*/, message: "请输入正确的id" },
          ],
          speed: [
            { required: true },
            { pattern: /^[0-9]+$/, message: "请输入纯数字" },
          ],
          x: [{ required: true }],
          y: [{ required: true }],
        },
      };
    },
    created() {
      this.geteditors(); //获取路线编辑数据
      this.gain(); //页面一打开就获取地图
    },
    watch: {
      radio(one, two) {
        // console.log(one, two);
        this.newradio = one;
      },
      deep: true, //开启深度侦听
      immediate: true, // watch侦听操作内的函数会立刻被执行
    },
    //  鼠标移动图片
    // mounted() {
    //   var div = document.getElementById("myone");
    //   div.addEventListener("touchstart", function (e) {
    //     var x = e.targetTouches[0].pageX - e.currentTarget.offsetLeft + 250;
    //     var y = e.targetTouches[0].pageY - e.currentTarget.offsetTop + 50;
    //     document.addEventListener("touchmove", move);
    //     function move(e) {
    //       div.style.left = e.targetTouches[0].pageX - x + "px";
    //       div.style.top = e.targetTouches[0].pageY - y + "px";
    //     }
    //     document.addEventListener("touchend", function () {
    //       document.removeEventListener("touchmove", move);
    //     });
    //   });
    // },
  
    //注册局部组件指令
    // directives: {
    //   drag: function (el) {
    //     let dragBox = el;
    //     dragBox.onmousedown = (e) => {
    //       //算出鼠标相对元素的位置
    //       let disX = e.clientX - dragBox.offsetLeft;
    //       let disY = e.clientY - dragBox.offsetTop;
    //       console.log(disX, disY);
    //       document.onmousemove = (e) => {
    //         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    //         //这个 170 是我元素宽的一半
    //         let left = e.clientX - disX;
    //         let top = e.clientY - disY;
    //         //移动当前元素
    //         dragBox.style.left = left + "px";
    //         dragBox.style.top = top + "px";
    //         console.log(left, top);
    //       };
    //       document.onmouseup = (e) => {
    //         //鼠标弹起来的时候不再移动
    //         document.onmousemove = null;
    //         //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
    //         document.onmouseup = null;
    //       };
    //     };
    //   },
    // },
  
    // 声明事件
    methods: {
      ListX(val) {
        this.list.x = Number(val);
      },
      ListY(val) {
        this.list.y = Number(val);
      },
  
      //x输入框获得焦点事件
      addX() {
        this.$emit("newxShow", true);
      },
      //y轴输入框获得焦点事件
      addY() {
        this.$emit("newyShow", true);
      },
  
      //图片上的库位点点击事件
      select(item) {
        this.activeItem = item;
        this.newproperty = false;
        console.log(this.activeItem, "点击后的数据");
      },
  
      //图片右边便宜
      right() {
        this.loctionleft += 30;
      },
      // 图片左边移动
      left() {
        this.loctionleft -= 30;
      },
      // 图片上边移动
      top() {
        this.loctiontop -= 30;
      },
      // 图片往下移动
      bottom() {
        this.loctiontop += 30;
      },
  
      //列列表单键盘输入的值
      rowChange(input) {
        this.inif.columnId = input;
      },
      //库位id的输入
      onChange(input) {
        // input 是当前点击按钮的值
        this.inif.seatId = input; //把点击的那一项的值赋值给输入框
      },
      //  速度的输入
      Change(input) {
        // input 是当前点击按钮的值
        // this.inif.speed = input; //把点击的那一项的值赋值给输入框
        if (this.keysshow == true) {
          //判断kesshow等于true就是速度的键盘
          this.inif.speed = input;
        } else if (this.xshow == true) {
          //xshow为true就是x轴的键盘
          this.list.x = input;
        } else {
          this.list.y = input;
        }
      },
      //键盘的删除和确定事件
      onKeyPress(button) {
        if (button == "{enter}") {
          // 如果按确认键的相应操作
          this.keyshow = false;
          this.keysshow = false;
          this.yshow = false;
          this.rowshow = false;
          this.xshow = false;
        }
        if (button == "{bksp}") {
          // 删除键的相应操作
        }
      },
  
      //获取路线编辑数据
      async geteditors() {
        let res = await geteditorsApi(); //发送请求获取数据
        // console.log(res)
        // console.log(this.complete, "路线"); //路线编辑数据
        if (res.data.msg != "successed") {
          this.complete = yaml.load(res.data); //定义一个新的变量
          // console.log(this.complete);
        }
      },
  
      //放大图片按钮
      big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
  
      //---------------------------------用来获取图片数据的方法
      gain() {
      let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
         //        let ws = new WebSocket("ws://192.168.20.101:10009");
        ws.onmessage = (e) => {
          //使用箭头函数改变this的指向
          //当服务器有消息，就会自动调用这个函数
          //e.data有服务器返回的数据
          const res = yaml.load(e.data); //使用yaml格式进行转换
          if (res.uri == "/sirius/topics/slam_grid_map") {
            //判断res中的uri路劲是不是等于有图片的路径
            this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
            this.width = res.info.width; //保存宽度
            this.height = res.info.height; //保存高度
            this.newx = res.info.origin.position.x;
            this.newy = res.info.origin.position.y;
            // console.log(this.newx,'圆点x轴',this.newy,'圆点y轴');
          } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
            this.inif.x = res.fused_x; //保存获取到的x轴坐标
            this.inif.y = res.fused_y-(this.newy*1000); //保存获取到的y轴坐标
            this.inif.fused_angle = res.fused_angle;
            // console.log(this.inif.x, this.inif.y, "坐标");
          }
        };
      },
      //--------------------------------------------------------------------------------------------------库位区域
      //-------------------------------点击记录后保存当前点击的这一项数据
      record() {
        // 点击记录按钮把form表单的状态改成显示
        // this.formShow = true;
        // 把二级路由导航栏的状态改为false隐藏
        this.$store.commit("changShow", false);
        this.isID = false;
      },
      //单选的点击事件
      addMultiple(index) {
        //保存用户点击的那一项下标
        this.index = index;
        this.newradio = index;
        // console.log(index,'点击的下标');
        this.$emit("changRadio", this.newradio);
        // console.log(this.index,'选中的');
      },
      //----------------------------------点击库位列表保存按钮发送请求进行编辑
      async onSubmit() {
        try {
          //----------------------------------发送请求修改的接口请求
          let res = await updataApi({
            id: this.list.id, //传入id
            type: this.list.type, //传入单选的类型
            x: this.list.x,
            y: this.list.y,
          });
          // //提示用户新建成功
          this.$toast.success("编辑成功");
          //生成自定义事件修改父组件中的值
          this.$emit("newxShow", false);
          //调用父组件中的方法刷新页面
          this.$parent.gain();
        } catch {
          this.$toast.fail("编辑失败");
        }
        // }
  
        // this.formShow = false; //修改成功后关闭表单
        // //点击提交完数据后把form表单的状态改为false
        // this.$emit("hideShow", false);
        // // //把二级路由导航栏的状态改为true
        // this.$store.commit("changShow", true);
        // //提交完成后把表单数据清空
        // this.inif.seatId = "";
        // this.inif.speed = "";
        // 提交后把开关都改为默认值
        // this.queen = false;
        // this.front = false;
        // this.take = false;
        //把单选也清空
        // this.radio = [];
        // //清除id
        // this.id = "";
      },
      //---------------------------------点击取消关闭键盘
      onClickLeft() {
        //生成自定义事件修改父组件中的值
        this.$emit("newxShow", false);
        // this.$emit("hideShow", false);  //自定义事件把表单关闭
        // this.formShow = false; //把表单改为隐藏
        // this.keysshow = false; //关闭键盘
        // this.keyshow = false; //关闭键盘
        // this.xshow = false; //关闭键盘
        // this.yshow = false; //关闭键盘
        // this.formShow = false; //把表单改为隐藏
        // this.$store.commit("changShow", true); //修改二级路由的显示与隐藏
        // this.inif.seatId = ""; //清除输入框内容id
        // this.inif.speed = ""; //清除最大速度值
        //清空正则验证
        // this.formKey++;
        // 退出后把开关都改为默认值
        // this.queen = false;
        // this.front = false;
        // this.take = false;
        //把单选也清空
        // this.radio = [];
      },
      // -----------------------------------点击修改触发的事件
      amend(item) {
        if (item == "") {
          this.$toast.fail("请选择你修改的那一项");
          return;
        }
        this.newItem = item;
        console.log(item);
        this.isID = true;
        // this.$emit("overShow", true);  //自定义事件把表单关闭
        this.formShow = true; //把编辑表单改为true
        this.id = item.id; //把点击的这一项的id进行赋值
        this.$store.commit("changShow", false); // 把二级路由导航栏的状态改为false隐藏
        this.inif.seatId = String(item.id); //赋值id
        // this.inif.speed = String(item.vel_max); //赋值速度
        this.inif.x = item.x;
        this.inif.y = item.y;
      },
  
      //----------------------------------删除库位的方法
      // remove(id) {
      //   if (id == undefined) {
      //     this.$toast.fail("请选择你要删除的那一项");
      //     return;
      //   } else {
      //     Dialog.confirm({
      //       title: "删除",
      //       message: `您确定要删除名称为${id}的库位吗？`,
      //     })
      //       // 点击确认发送请求
      //       .then(async () => {
      //         //发送删除库位的接口请求
      //         let res = await removeApi({
      //           id: id,
      //         });
      //         // 提示用户
      //         this.$toast.success("删除成功");
      //         //声明事件调用父组件中的方法
      //         this.$emit("gain");
      //         //声明自定义事件传入父组件
      //         this.$emit("onlist", "");
      //       })
      //       // 点击取消触发
      //       .catch(() => {
      //         // 提示用户
      //         this.$toast.fail("取消成功");
      //       });
      //   }
      // },
  
      //--------------------------------------------------------------------------------------------------新建组合列区域
      column() {
        this.listID = false; //关闭输入框的禁用
        this.columnShow = true;
        //把二级路由导航栏的状态改为false隐藏
        this.$store.commit("changShow", false);
      },
      //--------------------------------点击列列表单导航栏左侧关闭表单
      twoClickLeft() {
        // this.$emit("hideShow", false);  //自定义事件把表单关闭
        this.rowshow = false; //隐藏键盘
        this.columnShow = false; //把表单状态改为隐藏
        this.$store.commit("changShow", true); //把二级路由导航改为显示
        // 清空输入框
        this.inif.columnId = "";
        //清空正则验证
        this.formKey++;
        //清除选中库位的标记
        this.result = [];
        // 判断点击复选框等于0时
        if (this.result.length == 0) {
          //就把包含库列表的数据删除最后一项
          this.location.pop();
        }
      },
      //--------------------------------新建组合列点击提交
      async twoSubmit() {
        //判断没有id就是为新建就得筛选重复的id
        if (!this.listID) {
          // 使用数组中的findIndx方法进行遍历判断数组的id和名称是不是等于我输入的id和名称
          let index = this.parse.filter((item) => {
            return item.point_list_id == this.inif.columnId;
          });
          //如果返回值是不等于空的就代表id重复
          if (index != "") {
            // 提示用户
            this.$toast.fail("id重复!!!");
            // 直接retur结束后面的操作
            return;
          }
        }
        // 判断双向绑定的数组长度等于0
        if (this.result.length == 0) {
          //提示用户还没有选择库位
          this.$toast.fail("请选择库位");
          // 结束后面的代码
          return;
        }
        // 进行判断id不能大于10000
        if (this.inif.columnId >= 10000) {
          this.$toast.fail("id最大不能超过10000!"); //提示用户
          return; //直接return不执行后面的代码
        }
  
        // 判断是新增还是修改的请求
        if (this.listID == false) {
          //发送新增的请求
          let res = await addparseApi({
            point_list_id: this.inif.columnId, //传入参数id
            point_id: [...this.location], //把点击的库列表数据进行展开
          });
        } else {
          // 发送修改的请求
          let res = await changedApi({
            //传入保存的点击那一项的id
            point_list_id: this.Listitem.point_list_id,
            //传入你点击的这一项的数据进行展开
            point_id: [...this.location],
          });
          this.$set(this.list, "point_id", this.location);
        }
        // 提示用户新建成功
        this.$toast.success(this.listID ? "修改成功" : "新增成功");
        this.columnShow = false; //把表单状态改为隐藏
        this.$emit("getparse"); //声明一个事件用来调用父组件中刷新页面获取数据的方法
        // 清空输入框
        this.inif.columnId = "";
        // 把二级路由的状态改为显示
        this.$store.commit("changShow", true);
        //把选择框的状态，也就是把result数组赋值为空
        this.result = [];
      },
      //--------------------------------新建组合列表复选框的点击事件
      add() {
        this.location = this.result;
      },
  
      // 修改列列表按钮事件
      async change() {
        // this.columnShow = true; //把列列表单改为true显示
        // this.inif.columnId = item.point_list_id; //把点击的这一项的id赋值给输入框
        // this.listID = true; //把禁用改为不禁用
        // this.Listitem = item; //把点击的那一项数据保存起来
        // this.$store.commit("changShow", false); //把二级路路由改为隐藏
      },
      //----------------------------------删除列类表按钮事件
      detele(id) {
        // 弹出确认框
        Dialog.confirm({
          title: "删除列列表",
          message: `你确定要删除ID为${this.list.point_list_id}的列表嘛?`,
        })
          //点击确定执行
          .then(async () => {
            //发送请求
            let res = await deteleparseApi({
              point_list_id: id, //传入删除的id
            });
            // 提示用户
            this.$toast.success("删除成功");
            //声明一个事件用来调用父组件中刷新页面获取数据的方法
            this.$emit("getparse");
            //声明自定义事件传入父组件
            this.$emit("onlist", "");
          })
          // 点击取消
          .catch(() => {
            // 提示用户
            this.$toast.fail("取消成功!");
          });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .boxList {
    width: 100%;
    height: 100%;
    .List {
      width: 100%;
      display: flex;
      height: 100%;
      .myimg {
        margin-left: 40px;
        position: relative;
        text-align: center;
        border: 2px solid black;
        overflow: hidden;
        width: 955px !important;
        height: 400px;
        display: flex;
        .right {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          position: absolute;
          top: 40%;
          right: 38%;
          color: #1ac1c1;
          z-index: 1000;
          border: none;
        }
        .left {
          position: absolute;
          top: 40%;
          left: -35px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
          border: none;
          z-index: 1000;
        }
        .top {
          position: absolute;
          top: -35px;
          right: 64%;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
  
          z-index: 1000;
          border: none;
        }
        .bottom {
          position: absolute;
          bottom: -35px;
          right: 64%;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
          z-index: 1000;
          border: none;
        }
        ::v-deep .van-image__img {
          width: auto !important;
        }
        #myone {
          position: relative;
          cursor: move;
          z-index: 1000;
        }
  
        #youbutton {
          font-size: 20px;
          width: 120px;
          height: 35px;
          border-radius: 12px;
          background-color: #ffc000;
          position: absolute;
          top: 15px;
          left: 25px;
          text-align: center;
        }
        #mybutton {
          font-size: 20px;
          position: absolute;
          top: 40px;
          left: 25px;
          width: 140px;
          text-align: center;
          background-color: #ffc000;
          border-radius: 12px;
        }
      }
      .property {
        position: fixed;
        z-index: 3000;
        top: 65px;
        right: 0;
        height: 1000px;
        text-align: left;
        line-height: 45px;
        width: 220px;
        background-color: #12151a;
        .mybutton {
          text-align: center;
          .van-button {
            color: #fff;
            font-size: 22px;
            border-radius: 12px;
            width: 170px;
            background-color: #1a1c25;
            border: none !important;
            margin-top: 15px;
          }
        }
        .beiji {
          color: #5f5f61;
          height: 100%;
          background-color: #181a23;
        }
        .zore {
          font-size: 24px;
          color: white;
          margin-top: 50px;
          background-color: #212430;
          border-radius: 14px 14px 0 0;
          text-align: center;
        }
        .middle {
          color: #656666;
          font-size: 20px;
          text-indent: 1em;
        }
        .four {
          font-size: 20px;
          text-indent: 2em;
          .i {
            margin: 0 10px;
          }
        }
        .twofour {
          border: 2px solid black;
          text-indent: 1em;
          height: 240px;
          overflow-x: hidden;
          overflow-y: auto;
          div {
            font-size: 20px;
          }
          .twofour::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
    // .van-popup {
    //   position: fixed;
    //   top: 350px;
    //   // margin-bottom: 2000px;
    //   margin-left: 300px;
    //   width: 330px;
    //   height: 340px;
    //   // border: 2px solid black;
    //   overflow-x: hidden;
    // }
  
    .van-form {
      .van-field {
        width: 250px !important;
      }
      .van-cell {
        // margin-left: 20px !important;
      }
    }
  }
  ::v-deep input {
    color: #fff !important;
  }
  ::v-deep.van-field__control {
    width: 300px !important;
    color: #fff !important;
  }
  .boxList .van-form .van-field[data-v-40d3e1c4] {
    width: 330px !important;
    color: #fff !important;
  }
  .select {
    height: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: 40px;
  
    .select::-webkit-scrollbar {
      display: none;
    }
    .van-checkbox {
      margin-bottom: 15px;
    }
  }
  h5 {
    text-indent: 2em;
  }
  .mission {
    width: 160px;
    margin-top: 20px;
    height: 150px;
    // border-bottom: 2px solid black;
    // border-top: 2px solid black;
    .van-radio-group {
      font-size: 20px;
      height: 140px;
      margin-left: 25px;
      width: 200px;
    }
    ::v-deep .van-radio__label {
      margin-left: 8px;
      color: #fff;
      line-height: 20px;
    }
  }
  ::v-deep.van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0px !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 18px;
    line-height: 24px;
    background-color: #181a23 !important;
  }
  ::v-deep.van-field__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #fff !important;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
  }
  .bool {
    height: 180px;
    border-bottom: 2px solid black;
    .van-cell--center {
      width: 500px !important;
      text-align: center;
    }
    .van-cell__title {
      width: 200px !important;
    }
  }
  
  #mianspan {
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    background-color: #00d1d1;
    position: absolute;
  }
  #myspan {
    width: 35px;
    height: 35px;
    border: 2px solid #00d1d1;
    border-radius: 20px;
    position: absolute;
    top: 200px;
    left: 100px;
  }
  
  // 库位点样式
  #span {
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    width: 22px;
    height: 22px;
    position: absolute;
    background-color: #feed9d;
    border: 2px solid #cdc6a6;
    line-height: 22px;
    &.active {
      background-color: #46eefb;
      border: 2px solid #78b6fa;
    }
    &.twoactive {
      background-color: #46eefb;
      border: 2px solid #78b6fa;
    }
  }
  #bycar {
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 100;
  }
  .Gray {
    width: 22px;
    height: 22px;
    position: absolute;
    background-color: #feed9d;
    border: 2px solid #cfc598;
  }
  .newbutton {
    display: flex;
    .van-button {
      border: 2px solid #1989fa;
      margin: 0 auto;
      width: 100px !important;
      margin: 5px;
      background-color: #161920;
      font-weight: 700;
    }
  }
  .mybig {
    position: fixed;
    bottom: 30px;
    right: 240px;
    .van-button {
      margin-left: 20px;
    }
  }
  .imgactive {
    border: 2px solid #fac119;
    position: absolute;
    border-radius: 5px;
    background-color: #46eefb;
  }
  
  ::v-deep.keyboard_pop {
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    // padding: 50px 75px;
    width: 500px !important;
  }
  .y {
    display: flex;
    span {
      font-size: 20px;
      text-indent: 1.5em;
    }
  }
  .x {
    display: flex;
    span {
      font-size: 20px;
      text-indent: 1.5em;
    }
  }
  </style>
  